<template>
  <view>
    <!-- 自定义搜索组件 -->
    <Search @click="goToSearch"></Search>
    <!-- 滑动区域 -->
    <view class="scroll-view-container">
      <!-- 左侧 -->
      <scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}">
        <view 
        :class="['left-scroll-view-item', index === activeIndex ? 'active' : '']" 
        v-for="(cate, index) in categoryList" 
        :key="cate.cat_id"
        @click="activeClickHandler(index)"
        >{{cate.cat_name}}</view>
      </scroll-view>
      <!-- 右侧 -->
      <scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}" :scroll-top="scrollTop">
        <view class="cateLevel2" v-for="(cateLv2, index) in categoryLevel2" :key="cateLv2.cat_id">
          <!-- 二级分类标题 -->
          <view class="cateLevel2-title" v-show="cateLv2.children">{{cateLv2.cat_name}}</view>
          <!-- 三级分类 -->
          <view class="cateLevel3">
            <view class="cateLevel3-list" v-for="(cateLv3, index) in cateLv2.children" :key="cateLv3.cat_id" @click="goToGoodsDetail(cateLv3)">
              <!-- 三级分类图片 -->
              <image :src="cateLv3.cat_icon.replace('dev', 'web')" mode="widthFix"></image>
              <!-- 三级分类名称 -->
              <text>{{cateLv3.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import badegMix from '@/mixins/tabbar-badge.js'
  export default {
    mixins: [badegMix],
    data() {
      return {
        // 屏幕的高度
        wh: 0,
        // 分类的数据
        categoryList: [],
        // 二级分类
        categoryLevel2: [],
        // 选中项的索引
        activeIndex: 0,
        // 右侧距离顶部的距离
        scrollTop: 0
      };
    },
    onLoad() {
      // 设置高度
      const sysInfo = uni.getSystemInfoSync();
      this.wh = sysInfo.windowHeight - 50;
      // 调用获取分类数据方法
      this.getCategoryList();
    },
    methods: {
      // 获取分类列表
      async getCategoryList() {
        const result = await uni.$http.get('/api/public/v1/categories');
        if (result.data.meta.status !== 200) return uni.$showMsg();
        this.categoryList = result.data.message;
        this.categoryLevel2 = this.categoryList[0].children;
      },
      // 点击分类项
      activeClickHandler(index) {
        // 修改active索引
        this.activeIndex = index;
        // 更新二级分类数据
        this.categoryLevel2 = this.categoryList[index].children;
        // 返回到顶部
        this.scrollTop = Math.random();
      },
      // 点击跳转商品列表
      goToGoodsDetail(item) {
        console.log(item);
        uni.navigateTo({
          url: "/subpkg/goods_list/goods_list?cid=" + item.cat_id
        })
      },
      // 跳转到搜索页面
      goToSearch() {
        uni.navigateTo({
          url: "/subpkg/search/search"
        })
      }
    }
  }
</script>

<style lang="scss">
  // 滚动区域
  .scroll-view-container {
    width: 100%;
    display: flex;
    background-color: #fefefe;
    .left-scroll-view {
      width: 120px;
      .left-scroll-view-item {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 24rpx;
        text-align: center;
        background-color: #f7f7f7;
        &.active {
          background-color: #fefefe;
          position: relative;
          // 渲染激活项左侧的红色指示边线
          &::before {
            content: ' ';
            display: block;
            width: 3px;
            height: 30px;
            background-color: #C00000;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
    .right-scroll-view {
      width: 100%;
      display: flex;
      justify-content: space-around;
      .cateLevel2 {
        .cateLevel2-title {
          text-align: center;
          font-size: 12px;
          font-weight: bold;
          padding: 15px 0;
        }
        .cateLevel3 {
          display: flex;
          flex-wrap: wrap;
          .cateLevel3-list {
            // background-color: pink;
            width: 33.33%;
            display: flex;
            margin-bottom: 10px;
            flex-direction: column;
            align-items: center;
            image {
              width: 60px;
              height: 60px;
            }
            text {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
</style>
